<template>
  <div class="monitoring">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-laptop" />
        </span>
        <div class="d-flex">
          <span class="fs-xxl text mx-2 mt-1">校园监控</span>
          <dv-decoration-3 style="width:100px;height:25px;" :color="datavColors"/>
          <!-- <el-tooltip
            effect="dark"
            content="监控地图"
            placement="top-start"
          >
            <img class="mapIcon" :src="mapIcon" alt="" @click="openMap" />
            
          </el-tooltip> -->
          
          <el-icon class="pointer mapIcon" v-if="isCamera" :size="24" @click="backBuildings"><Back /></el-icon>
        </div>
      </div>
      <div class="d-flex pt-2 pl-2">
        <el-scrollbar v-if="!isCamera" height="320px" style="width:100%">
          <el-row>
            <el-col class="buildingsCol pointer" :span="8" v-for="(item,index) in buildings" :key="index" @click="handleBuildins(item)">
              <div class="buildingsDiv building">
                <!-- {{item.buildingName?item.buildingName:'其他'}} -->
                <img :src="hgzx" class="image" alt="">
                <div class="buildingName">
                  {{item.buildingName?item.buildingName:'其他'}}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
        <el-scrollbar v-else height="320px" style="width:100%">
          <el-row>
            <el-col class="buildingsCol pointer camera" :span="12" v-for="(item,index) in cameras" :key="index" @click="handleCameras(item)">
              <div class="buildingsDiv">
                <img class="cameraIcon" :src="getCameraIcon(item.category)" alt="">
                <span>{{item.name}}</span>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" :title="title+'监控分布'" width="600px">
    <Chart />
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref,computed,onMounted,watch  } from "vue";
import { useStore } from 'vuex'
import { getCameraUrl,rtsp2m3U8 } from '@/public/request/http'
import bus from '@/utils/bus'
import { ElMessage } from "element-plus";
// import vueSeamlessScroll from "vue-seamless-scroll/src";
import Chart from "./chart/index"

// 声明类型
const PropsType = {
  buildings: {
    type: Array,
    require: true,
  },
}
export default defineComponent({
  props: PropsType,
  emits:['openMap'],
  components: {
    // vueSeamlessScroll,
    Chart
  },
  setup(props,context) {
    const datavColors = computed(() => useStore().state.datavColors)
    const mapIcon = require("@/assets/mapIcon.png")
    const hgzx = require("@/assets/hgzx.png")
    const dialogVisible = ref(false)
    const isCamera = ref(false)
    const buildings = ref([
      {
        buildingName: '一栋101',
        cameras: [
          {
            category: 1,
            name: '101教室摄像头',
            equipmentItem: 3,
          },
          {
            category: 2,
            name: '101走廊人脸识别摄像机',
          },
          {
            category: 3,
            name: '101教室球机',
          },
          {
            category: 6,
            name: '101教室门口人脸考勤机',
          }
        ]
      },
      {
        buildingName: '一栋102',
        cameras: [
          {
            category: 3,
            name: '102走廊',
          }
        ]
      },
      {
        buildingName: '一栋103',
        cameras: [
          {
            category: 2,
            name: '103走廊',
          }
        ]
      },
      {
        buildingName: '一栋104',
        cameras: [
          {
            category: 2,
            name: '104走廊',
          }
        ]
      },
      {
        buildingName: '一栋105',
        cameras: [
          {
            category: 1,
            name: '105走廊',
          }
        ]
      },
      {
        buildingName: '一栋106',
        cameras: [
          {
            category: 1,
            name: '106走廊',
          }
        ]
      },
      {
        buildingName: '一栋107',
        cameras: [
          {
            category: 6,
            name: '107走廊',
          }
        ]
      },
      {
        buildingName: '一栋108',
        cameras: [
          {
            category: 4,
            name: '108走廊',
          }
        ]
      },
      {
        buildingName: '一栋109',
        cameras: [
          {
            category: 1,
            name: '109走廊',
          }
        ]
      },
    ]);
    const cameras = ref([]);
    // const equipment = ref([
    //   {
    //     name:'智慧安防',
    //     value:1
    //   },
    //   {
    //     name:'智慧食堂',
    //     value:2
    //   },
    //   {
    //     name:'巡课',
    //     value:3
    //   }
    // ])

    const cameraCategory = ref([
      {
        name:'普通摄像机',
        value:1,
        icon:'camera'
      },
      {
        name:'人脸识别摄像机',
        value:2,
        icon:'camera_face'
      },
      {
        name:'球机',
        value:3,
        icon:'camera_circle'
      },
      {
        name:'闸机',
        value:4,
        icon:'camera_gate'
      },
      {
        name:'门禁',
        value:5,
        icon:'camera_entrance'
      },
      {
        name:'人脸考勤机',
        value:6,
        icon:'camera_attendance'
      }
    ])

    const title = ref(null)

    
    const openMap = () =>{
      context.emit('openMap')
    }

    // const getCameraData = async () => {
    //   buildings.value = await camera()
    // }

    const handleBuildins = (val:any) =>{
      isCamera.value = true
      cameras.value = val.cameras
    }

    const handleCameras = async(val:any) => {
      // eslint-disable-next-line no-unreachable
      if(val.equipmentItem == 1){
        bus.emit('playCamera', val);
      }else if(val.equipmentItem == 3){
        bus.emit('playm3u8', 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8');
        // let res = await getCameraUrl(val.id)
        // if(res){
        //   // bus.emit('playm3u8', res);
        //   let data = await rtsp2m3U8({
        //     sourceAddress: res,
        //     videoType: "hls",
        //     conversionType: "transcoding"
        //   })
        //   bus.emit('playm3u8', 'http://192.168.81.4:15006'+data.data);
        // }
      }
      else{
        if(val.extraProperties != null){
          bus.emit('playm3u8', JSON.parse(val.extraProperties).url);
        }else{
          ElMessage.warning(`设备视频暂未接入`);
        }
      }
    }

    const getCameraIcon = (val:any) =>{
      let text = 'camera'
      cameraCategory.value.forEach(element => {
        if(element.value == val){
          text = element.icon
        }
      });
      let icon = require(`@/assets/${text}.png`)
      return icon
    }

    const backBuildings = () => {
      isCamera.value = false
    }

    // 监听
    watch(
      () => props.buildings,
      (val: any) => {
        buildings.value = val
      }
    )
    

    return {
      buildings,
      mapIcon,
      hgzx,
      openMap,
      dialogVisible,
      title,
      datavColors,
      handleBuildins,
      backBuildings,
      handleCameras,
      getCameraIcon,
      isCamera,
      cameras,
      cameraCategory
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$box-height: 400px;
$box-width: 100%;
.monitoring {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
.mapIcon{
  width:24px;
  height:24px;
  position: absolute;
  right: 20px;
  cursor: pointer;
}
.buildingsCol{
  padding: 8px;
}
.buildingsDiv{
  .cameraIcon{
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }
  .image{
    width: 100%;
    max-height: 200px;
    display: block;
  }
  .buildingName{
    padding: 10px;
    background-color: #407e8d63;
  }
}
.building:hover{
  box-shadow: 0px 0px 10px #00adff;
}
.camera:hover{
  background-color: #407e8d63;
}
.cameraRow{
  width: 100%;
  overflow-y: auto;
  height: 320px;
}
</style>
